<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas练习1</title>
</head>

<body>
    <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto">
        当前浏览器不支持canvas，请更换浏览器再试
    </canvas>

    <!-- <script>
        window.onload = function(params) {
            //初始化
            var canvas = document.getElementById('canvas');
            canvas.width = 1024;
            canvas.height = 768;
            if (canvas.getContext('2d')) {
                var context = canvas.getContext('2d');
                //使用context进行绘制
            } else {
                alert('当前浏览器不支持canvas，请更换浏览器再试');
            }

            context.beginPath();
            context.moveTo(100,100);
            context.lineTo(700,700);
            context.lineTo(100,700);
            context.lineTo(100,100);
            //上色
            // context.fillStyle = 'rgb(2,100,30)';
            // context.fill();
            //勾边
            context.lineWidth = 5;
            context.strokeStyle = 'red';
            context.stroke();
            context.closePath();
            //第二笔
            context.beginPath();
            context.moveTo(200, 100);
            context.lineTo(700, 600);
            context.closePath();
            //勾边
            context.strokeStyle = 'black';
            context.stroke();
        }
    </script> -->

    <script>
        var tangram = [
            {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
            {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
            {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
            {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
            {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
            {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
            {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
        ];
        window.onload = function () {
        var canvas = document.getElementById('canvas');

            canvas.width = 800;
            canvas.height = 800;

            var context = canvas.getContext('2d');
            for(var i=0;i<tangram.length;i++){
                draw(tangram[i],context);
            }

            function draw(piece,cxt) {

                cxt.beginPath();
                cxt.moveTo(piece.p[0].x,piece.p[0].y);

                for(var i=0;i<piece.p.length;i++){
                    cxt.lineTo(piece.p[i].x,piece.p[i].y);
                }

                cxt.closePath();
                cxt.fillStyle = piece.color;
                cxt.fill();

                cxt.strokeStyle = 'black';
                cxt.lineWidth = 3;
                cxt.stroke();
            }
        }
    </script>
</body>

</html>